<section id = "doc_viewport-navigation" data-view = "true" data-view-title = "视图跳转">
	<header>
		<a class = "nav-back" data-view-rel = ":back"></a>
		<span>视图跳转</span>
		<a class = "menu"></a>
	</header>
	<div class = "body">
		<p>View.js支持如下几种方式进行视图跳转：</p>
		<ol>
			<li>
				<span class = "code html">A</span>链接，如：
				<div class = "code html" >&lt;a href = "http://www.mydomain.com/html/index.html#goods-detail"&gt;商品详情&lt;/a&gt;</div>
				<p class = "no-text-indent">此时，要求视图：goods-detail为默认视图或可以直接访问。</p>
			</li>
			<li>
				<span class = "code html">data-view-rel</span>属性，如：
				<div class = "code html" >
&lt;span data-view-rel = "@index.html#goods-detail"&gt;商品详情&lt;/span&gt;
&lt;span data-view-rel = "@http://www.mydomain.com/index.html#goods-detail"&gt;商品详情&lt;/span&gt;
&lt;div data-view-rel = "profile" data-view-rel-type = "change"&gt;个人中心&lt;/div&gt;
				</div>
				<p class = "no-text-indent">其中"@"符号用于告诉View.js进行页面跳转访问。</p>
				<p class = "no-text-indent">此时，要求视图：goods-detail为默认视图或可以直接访问。</p>
			</li>
			<li>
				JS API：<span class = "code js">View.navTo</span>，如：
				<div class = "code js" >View.navTo("setting", {params: {a: 1}, options: {b: 2}});</div>
			</li>
			<li>
				JS API：<span class = "code js">View.changeTo</span>，如：
				<div class = "code js" >View.changeTo("setting", {params: {a: 1}, options: {b: 2}});</div>
			</li>
		</ol>

		<p>其中，1)和2)两种方式无法传参；3)和4)两种方式可以传参。</p>
		<p><span class = "code js">View.navTo</span>和<span class = "code js">View.changeTo</span>的差别之处，在于是否向浏览堆栈中添加记录。使用<span class = "code js">View.navTo</span>执行视图A向视图B的跳转时，用户可以在视图B中通过物理返回键返回A；使用<span class = "code js">View.changeTo</span>执行视图A向视图B的跳转时，A的浏览历史将被B所替代，用户在视图B中无法通过物理按键返回A。</p>
	</div>
	<footer><div class = "btn next">下一节</div></footer>
</section>